<template>
	<div>
		<div id="main" style="width: 80vw;height:80vh;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import 'echarts-gl';


	export default {
		name: 'GlobeAtmosphere',
		mounted() {
			this.getEarth()
		},
		methods: {
			getEarth() {
				let res = [
					[{
							name: '上海',
							coord: [121, 31]
						},
						{
							name: '西安',
							coord: [108, 35]
						}
					]
				];
				var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);
				var option;
				option = {
					backgroundColor: '#000',
					globe: {
						baseTexture: require('/src/assets/img/earth.jpg'),
						shading: 'lambert',

						environment: require('/src/assets/img/starfield.jpg'),

						atmosphere: {
							show: true
						},

						light: {
							ambient: {
								intensity: 0.1
							},
							main: {
								intensity: 1.5
							}
						}
					},
					series: []
				};

				option && myChart.setOption(option);
			}
		}
	}
</script>

<style>
</style>
